$(document).ready(function () {
  if (jQuery().imagesLoaded && jQuery().wookmark) {
    $('.tiles').imagesLoaded(function () {
      $('.tiles img').each(function () {
        var size = getResized(this.width, this.height, 252, 400)
        $(this).width(size[0])
        $(this).height(size[1])
      })

      // Prepare layout options.
      var options = {
        container: $('.tiles_container'), // Optional, used for some extra CSS styling
        offset: 5, // Optional, the distance between grid items
        outerOffset: 10, // Optional, the distance to the containers border
        align: 'center',
      }

      // Get a reference to your grid items.
      var handler = $('.tiles li')

      // Call the layout function.
      handler.wookmark(options)
    })
  }

  function getResized(srcWidth, srcHeight, maxWidth, maxHeight) {
    var ratio = [maxWidth / srcWidth, maxHeight / srcHeight]
    ratio = Math.min(ratio[0], ratio[1])

    return {
      width: srcWidth * ratio,
      height: srcHeight * ratio,
    }
  }
})
